<!--工艺参数-->
<template>
  <div class="series-con-item" :class="{'series-con-full':stringField}">
    <div class="series-con-label">{{seriesParamDetail.name}}：</div>
    <div class="series-con-box" >
      <textarea v-if="stringField" v-model="seriesParamDetail.value" maxlength="500" :disabled="disabled"></textarea>
      <input @blur="inputCheck" v-else :disabled="disabled" type="text" v-model="seriesParamDetail.value" maxlength="8">
      <div class="err-msg" v-if="errMsg">{{errMsg}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'seriesParams',
  data () {
    return {
      errMsg:'',
    };
  },

  components: {},

  computed: {
    stringField: function(){
      return this.seriesParamDetail.name.indexOf("情况")>-1;
    }
  },

  props:{
    seriesParamDetail:{
      type: Object,
      default(){
        return { }
      }
    },
    disabled:{
      type: Boolean,
      default: false
    }
  },
  watch:{
    '$store.state.produceDataCheck'(value){
        this.inputCheck(true)
    },
  },
  methods: {
    inputCheck(tag = false){
      this.errMsg = ''
    
      if (this.seriesParamDetail.statisticType && !this.isNumber(this.seriesParamDetail.value)) {
        this.errMsg = "请输入数字（小数点最多2位）"
        // this.$vux.toast.show({ text:this.errMsg, type: "warn" })
        return
      } 
      // else if (Number.parseInt(this.seriesParamDetail.value) > 99999) {
      //   this.errMsg = "最多输入5个字符"
      //   this.$vux.toast.show({ text:this.errMsg, type: "warn" })
      //   return
      // } 
      else if (this.seriesParamDetail.inputDataType === 'number' && this.seriesParamDetail.inputDataMaxValue && !this.maxCheck(this.seriesParamDetail.value,this.seriesParamDetail.inputDataMaxValue*1.3)) {
        this.errMsg = `${this.seriesParamDetail.name}已超过最佳产能的30%`
        // this.$vux.toast.show({ text:this.errMsg, type: "warn" })
        return
      }
      if (!tag) {
        this.dataSave()
      }
    },

    dataSave(){
      this.$store.commit('changeProduceDataStatus')
    },
    // 是否数字
    isNumber(source) {
      let flag = /^([0-9]*|\d*\.\d{1,2}?)$/.test(source);
      // console.log(flag,source);
      return flag;
    },
    maxCheck(source,max){
      if (!source) {
        return true
      }
      return +source <= +max
    }
  }
}

</script>
<style lang="less" scoped>
.series-con-item {
  // display: flex;
  // align-items: flex-start;
  // padding: 4px 0;
  .series-con-label {
    width: 130px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
  }
  .series-con-box {
    flex: 1;
    color: #ffffff;
    font-size: 14px;
    width: 96%;
    input {
      touch-action: none;
      width: 100%;
      border: 0;
      // text-align: center;
      color: #ffffff;
      font-size: 14px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.6);
      &:readonly {
        background: none;
        color: #ffffff;
        // -webkit-text-fill-color:#ffffff;
      }
      &.full {
        width: 100%;
      }
    }
    input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      color: #ffffff;
    }
    input::-moz-placeholder { /* Firefox 19+ */
      color: #ffffff;
    }
    input:-ms-input-placeholder { /* IE 10+ */
      color: #ffffff;
    }
    input:-moz-placeholder { /* Firefox 18- */
      color: #ffffff;
    }
    textarea {
      width: 100%;
      height: 80px;
      border: 0;
      background: #ffffff;
      color: #22233f;
      font-size: 14px;
      padding: 8px;
      border-radius: 2px;
    }
    .err-msg{
      color: #ff2c2c;
      font-size: 12px;
    }
  }
}
  .series-con-full{
    flex-direction: column;
    .series-con-label{
      width: 100%;
    }
  }
</style>
